<script setup lang="ts">
import useDragramStore from '@/pages/table-diagraming/store/useDragramStore'

const dragramStore = useDragramStore()
const { columnOptionTrigger, selectedColumn } = storeToRefs(dragramStore)
</script>

<template>
  <el-drawer v-model="columnOptionTrigger" :title="`【${selectedColumn?.label}】列属性`">
    <el-form v-if="selectedColumn" :model="selectedColumn" label-width="120">
      <el-form-item label="列名" prop="label">
        <el-input
          v-model="selectedColumn.label"
          clearable
          placeholder="请输入列名"
        ></el-input>
      </el-form-item>
      <el-form-item label="对应字段" prop="prop">
        <el-input
          v-model="selectedColumn.prop[0]"
          clearable
          placeholder="请输入列prop"
        ></el-input>
      </el-form-item>

      <el-form-item label="最小宽度（可选）" prop="minWidth">
        <el-input-number
          v-model="selectedColumn.minWidth"
          placeholder="请输入最小宽度"
          clearable
          :controls="false"
          :min="50"
          :precision="0"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="宽度（可选）" prop="width">
        <el-input-number
          v-model="selectedColumn.width"
          placeholder="请输入固定宽度"
          clearable
          :controls="false"
          :min="50"
          :precision="0"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="对齐方式" prop="align">
        <el-radio-group v-model="selectedColumn.align">
          <el-radio-button label="left" value="left"></el-radio-button>
          <el-radio-button label="center" value="center"></el-radio-button>
          <el-radio-button label="right" value="right"></el-radio-button>
        </el-radio-group>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>

<style lang="scss" scoped></style>
